<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  <meta name="description" content="SvgC examples" />
   <link href="prettify.css" media="screen" rel="stylesheet" type="text/css" />
   <link href="style.css"    media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../js/svg_c.js"></script>
  <script type="text/javascript" src="prettify.js"></script>
  <title>SvgC - Basic functions</title>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>1. Basic functions</h1>

<h2>1.1 Svg constructor function</h2>

<h3>SvgC (element, width, height)</h3>

Creates a new SvgC object
<ul>
  <li><strong>element</strong> - element or element ID</li>
  <li><strong>width</strong> - SVG element width [optional]</li>
  <li><strong>height</strong> - SVG element height [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
<div id="example_constr1">
  <script type="text/javascript">
  //<![CDATA[
    var c = new SvgC("example_constr1", 200, 200);
    c.translate(100, 100).rotate(45);
    c.rect(-65, -50, 130, 100, {fill:"#ffe6d5", rx:"20px"});
    c.circle(0,  0, 40, {fill:"#ffb380"});
    c.circle(0,  0, 30, {fill:"#ffffff"});
    c.circle(10, 0, 15, {fill:"#de8787"});
  //]]>
  </script>
</div>
</td>
<td>
  <pre class="prettyprint">
&lt;div id="example1"&gt;
  &lt;script type="text/javascript"&gt;
    var c = new SvgC("example_constr1", 200, 200);
    c.translate(100, 100).rotate(45);
    c.rect(-65, -50, 130, 100, {fill:"#ffe6d5", rx:"20px"});
    c.circle(0,  0, 40, {fill:"#ffb380"});
    c.circle(0,  0, 30, {fill:"#ffffff"});
    c.circle(10, 0, 15, {fill:"#de8787"});
  &lt;/script&gt;
&lt;/div&gt;
  </pre>
</td>
</tr>
<tr>
<td>
<div id="example_constr2">
</div>
<script type="text/javascript">
//<![CDATA[
  var c = new SvgC("example_constr2", 200, 200);
  c.translate(100, 100).rotate(45);
  c.rect(-65, -50, 130, 100, {fill:"#ffe6d5", rx:"20px"});
  c.circle(0,  0, 40, {fill:"#ffb380"});
  c.circle(0,  0, 30, {fill:"#ffffff"});
  c.circle(10, 0, 15, {fill:"#de8787"});
//]]>
</script>
</td>
<td>
  <pre class="prettyprint">
&lt;div id="example3"&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
  var c = new SvgC("example3", 200, 200);
  c.translate(100, 100).rotate(45);
  c.rect(-65, -50, 130, 100, {fill:"#ffe6d5", rx:"20px"});
  c.circle(0,  0, 40, {fill:"#ffb380"});
  c.circle(0,  0, 30, {fill:"#ffffff"});
  c.circle(10, 0, 15, {fill:"#de8787"});
&lt;/script&gt;
        </pre>
</td>
</tr>
<tr>
<td>
<svg id="example_constr3" xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink"
                   version="1.1">
  <script type="text/javascript">
  //<![CDATA[
    var c = new SvgC("example_constr3", 200, 200);
    c.translate(100, 100).rotate(45);
    c.rect(-65, -50, 130, 100, {fill:"#ffe6d5", rx:"20px"});
    c.circle(0,  0, 40, {fill:"#ffb380"});
    c.circle(0,  0, 30, {fill:"#ffffff"});
    c.circle(10, 0, 15, {fill:"#de8787"});
  //]]>
  </script>
</svg>
</td>
<td>
  <pre class="prettyprint">
&lt;svg id="example_constr3" xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink"
                   version="1.1"&gt;
  &lt;script type="text/javascript"&gt;
    var c = new SvgC("example2", 200, 200);
    c.translate(100, 100).rotate(45);
    c.rect(-65, -50, 130, 100, {fill:"#ffe6d5", rx:"20px"});
    c.circle(0,  0, 40, {fill:"#ffb380"});
    c.circle(0,  0, 30, {fill:"#ffffff"});
    c.circle(10, 0, 15, {fill:"#de8787"});
  &lt;/script&gt;
&lt;/svg&gt;
  </pre>
</td>
</tr>
</table>


<h2>1.2 Svg shape functions</h2>


All SVG shapes are created with function named after that shape. Each function has three type of arguments:
<ul>
  <li>first argument is a brush name (optional)</li>
  <li>last argument is an additional attributes list (optional)</li>
  <li>all middle arguments are required arguments for element</li>
</ul>

<h3>rect (brush, x, y, w, h, attrs_ext)</h3>

Creates a rectangle element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>x</strong> - the x-coordinate of the upper-left corner of the rectangle</li>
  <li><strong>y</strong> - the y-coordinate of the upper-left corner of the rectangle</li>
  <li><strong>w</strong> - the width of the rectangle</li>
  <li><strong>h</strong> - the height if the rectangle</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>

Example:
<table>
<tr>
<td>
  <div id="example_rect">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_rect", 200, 200);
c.rect( 40,  40, 80, 80, {rx:10, fill:"#ff7f0f", stroke:"none"});
c.rect( 80,  80, 70, 70, {rx:10, fill:"#ffcc00", stroke:"white", "stroke-width":"8px"});
c.rect( 50, 130, 20, 20, {rx: 5, fill:"#ff5500", stroke:"none"});
c.rect(140,  30, 25, 25, {rx: 5, fill:"#ff3751", stroke:"none"});
//]]>
  </script>
  </div>
</td>
<td>
    <pre class="prettyprint">
var c = new SvgC("example_rect", 200, 200);
c.rect( 40,  40, 80, 80, {rx:10, fill:"#ff7f0f", stroke:"none"});
c.rect( 80,  80, 70, 70, {rx:10, fill:"#ffcc00", stroke:"white", "stroke-width":"8px"});
c.rect( 50, 130, 20, 20, {rx: 5, fill:"#ff5500", stroke:"none"});
c.rect(140,  30, 25, 25, {rx: 5, fill:"#ff3751", stroke:"none"});
   </pre>
</td>
</tr>
</table>

<h3>circle (brush, cx, cy, r, attrs_ext)</h3>
Creates a circle element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>cx</strong> - the x-axis coordinate of the center of the circle</li>
  <li><strong>cy</strong> - the y-axis coordinate of the center of the circle</li>
  <li><strong>r</strong> - the radius of the circle</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_circle">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_circle", 200, 200);
c.translate(100, 100);
for (var t=0; t<16; t++) {
  var x = 50*Math.cos(t*Math.PI/8);
  var y = 50*Math.sin(t*Math.PI/8);
  c.circle(x, y, 8, {fill:c.rgb(255, 10*t, 28)});
}
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_circle", 200, 200);
c.translate(100, 100);
for (var t=0; t&lt;16; t++) {
  var x = 50*Math.cos(t*Math.PI/8);
  var y = 50*Math.sin(t*Math.PI/8);
  c.circle(x, y, 8, {fill:c.rgb(255, 10*t, 28)});
}
  </pre>
</td>
</tr>
</table>

<h3>ellipse (brush, cx, cy, rx, ry, attrs_ext)</h3>

Creates a ellipse element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>cx</strong> - the x-axis coordinate of the center of the ellipse</li>
  <li><strong>cy</strong> - the y-axis coordinate of the center of the ellipse</li>
  <li><strong>rx</strong> - the x-axis radius of the ellipse</li>
  <li><strong>ry</strong> - the y-axis radius of the ellipse</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>

Example:
<table>
<tr>
<td>
  <div id="example_ellipse">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_ellipse", 200, 200);
c.brush({stroke:"red", "stroke-width":"3px", fill:"white"});
c.ellipse(70, 130, 20, 10);
c.ellipse(50, 150, 10,  5);
c.ellipse(120, 80, 70, 40);
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_ellipse", 200, 200);
c.brush({stroke:"red", "stroke-width":"3px", fill:"white"});
c.ellipse(70, 130, 20, 10);
c.ellipse(50, 150, 10,  5);
c.ellipse(120, 80, 70, 40);
  </pre>
</td>
</tr>
</table>


<h3>line (brush, x1, y1, x2, y2, attrs_ext)</h3>

Creates a line element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>x1</strong> - the x-axis coordinate of the start of the line</li>
  <li><strong>y1</strong> - the y-axis coordinate of the start of the line</li>
  <li><strong>x2</strong> - the x-axis coordinate of the end of the line</li>
  <li><strong>y2</strong> - the y-axis coordinate of the end of the line</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_line">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_line", 200, 200);
c.brush({stroke:"red", "stroke-width":"3px"});
for (var i=-40; i<=40; i+=40) {
    c.line( 50,   -50+200+i, 150,   -150+200+i);
    c.line( 50-i,  50,       150-i,  150);
}
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_line", 200, 200);
c.brush({stroke:"red", "stroke-width":"3px"});
for (var i=-40; i&lt;=40; i+=40) {
    c.line( 50,   -50+200+i, 150,   -150+200+i);
    c.line( 50-i,  50,       150-i,  150);
}
  </pre>
</td>
</tr>
</table>

<h3>polygon (brush, x1, y1, x2, y2, x3, y3, attrs_ext)</h3>
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>points</strong> - defines the x-axis and y-axis coordinates for each corner of the polygon</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_polygon">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_polygon", 200, 200);
c.brush({stroke:"red", "stroke-width":"3px", fill:"#f98"});
c.polygon([10,90, 90,90, 50,30]);
c.polygon([140,90, 170,60, 140,30, 110,60]);
c.polygon("20,180 60,180 70,145, 40,120 10,145");
c.polygon("110,165 140,180 170,165 170,135, 140,120 110,135");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_polygon", 200, 200);
c.brush({stroke:"red", "stroke-width":"3px", fill:"#f98"});
c.polygon([10,90, 90,90, 50,30]);
c.polygon([140,90, 170,60, 140,30, 110,60]);
c.polygon("20,180 60,180 70,145, 40,120 10,145");
c.polygon("110,165 140,180 170,165 170,135, 140,120 110,135");
  </pre>
</td>
</tr>
</table>


<h3>path(brush, d, attrs_ext)</h3>

Creates a path element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>d</strong> - the definition of the outline of a shape</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_path1">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_path1", 200, 200);
c.attrs["path"] = {
  "fill":"#ff2a2a",
  "stroke":"white",
  "stroke-width":"6px",
  "stroke-linejoin":"round"
};
c.translate(90, 180);
c.path([
  "m", 25,0,
  "c ", 0,  0,  17, -7,  20,-20,  4, -20, -10, -38, -13,-42,
       -4, -6, -10, -9, -22,-18, -6,  -4,   0, -25, -25,-30,
       20, 20, -14, 75, -11, 91,  4,  17,  25,  19,  25, 18,
   "z"]);
c.path([
  "m", 20, 0,
  "c",  0, 0,  -45,-24, -34,-55,  11,-32, 39,-40, 39,-65,
       20,15,   14, 65,   3, 76, -19, 21, -8, 44, -8, 43,
  "z"]);
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_path1", 200, 200);
c.attrs["path"] = {
  "fill":"#ff2a2a",
  "stroke":"white",
  "stroke-width":"6px",
  "stroke-linejoin":"round"
};
c.translate(90, 180);
c.path([
  "m", 25,0,
  "c ", 0,  0,  17, -7,  20,-20,  4, -20, -10, -38, -13,-42,
       -4, -6, -10, -9, -22,-18, -6,  -4,   0, -25, -25,-30,
       20, 20, -14, 75, -11, 91,  4,  17,  25,  19,  25, 18,
   "z"]);
c.path([
  "m", 20, 0,
  "c",  0, 0,  -45,-24, -34,-55,  11,-32, 39,-40, 39,-65,
       20,15,   14, 65,   3, 76, -19, 21, -8, 44, -8, 43,
  "z"]);
  </pre>
</td>
</tr>
<tr>
<td>
  <div id="example_path2">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_path2", 200, 200);
var r = 1.3;
var R = 30.0;
var k = 50.0;

c.defs(function(c, d) {
  c.gradient("#rgrad", "r90%:15%-#f00,40%-#303,50%-#fff");
});

c.translate(100, 100).g("#spirograph", function (c, g) {
  var path = ["M",  80,0, " L"];
  for (var t=0; t<2*Math.PI; t+=0.01) {
    var x = (R-r)*Math.cos(t) + k*Math.cos(t*(R-r)/r);
    var y = (R-r)*Math.sin(t) - k*Math.sin(t*(R-r)/r);
    path.push(x, y);
  }
  c.path(path, {stroke:"url(#rgrad)", fill:"none"});
});
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_path2", 200, 200);
var r = 1.3;
var R = 30.0;
var k = 50.0;

c.defs(function(c, d) {
  c.gradient("#rgrad", "r90%:15%-#f00,40%-#303,50%-#fff");
});

c.translate(100, 100).g("#spirograph", function (c, g) {
  var path = ["M",  80,0, " L"];
  for (var t=0; t&lt;2*Math.PI; t+=0.01) {
    var x = (R-r)*Math.cos(t) + k*Math.cos(t*(R-r)/r);
    var y = (R-r)*Math.sin(t) - k*Math.sin(t*(R-r)/r);
    path.push(x, y);
  }
  c.path(path, {stroke:"url(#rgrad)", fill:"none"});
});
  </pre>
</td>

</tr>
</table>

<h3>text (brush, x, y, text, attrs_ext)</h3>

Creates a text element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>x</strong> - the x-coordinate of the upper-left corner of the text</li>
  <li><strong>y</strong> - the y-coordinate of the upper-left corner of the text</li>
  <li><strong>text</strong> - the text content</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_text">
  <script type="text/javascript">
//<![CDATA[
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
var c = new SvgC("example_text", 200, 200);
c.brush({fill:"red", "font-size":"9px"});
for (var x=0; x<200; x+=10) {
  for (var y=0; y<200; y+=10) {
    var nr = Math.floor(Math.random() * chars.length);
    c.brush({fill:c.rgb(90+4*nr, 90+4*nr, 90+4*nr)});
    c.text(x, y, chars.substring(nr, nr+1));
  }
}

c.brush({"font-size":"40px", "text-anchor":"middle"});
c.brush({fill:"#f66", stroke:"#f00"});
c.text(100, 50, "text\n function");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
var c = new SvgC("example_text", 200, 200);
c.brush({fill:"red", "font-size":"9px"});
for (var x=0; x&lt;200; x+=10) {
  for (var y=0; y&lt;200; y+=10) {
    var nr = Math.floor(Math.random() * chars.length);
    c.brush({fill:c.rgb(90+4*nr, 90+4*nr, 90+4*nr)});
    c.text(x, y, chars.substring(nr, nr+1));
  }
}

c.brush({"font-size":"40px", "text-anchor":"middle"});
c.brush({fill:"#f66", stroke:"#f00"});
c.text(100, 50, "text\n function");
  </pre>
</td>
</tr>
</table>



<h2>1.3 Document structure elements</h2>

<h3>title (text)</h3>
Creates a title element
<ul>
  <li><strong>title</strong> - SVG title element content</li>
</ul>

<h3>desc (text)</h3>
Creates a desc element
<ul>
  <li><strong>text</strong> - SVG description element content</li>
</ul>

<h3>g (brush, fun)</h3>
Creates a g element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>fun</strong> - g content constructor function [optional]</li>
</ul>

Function takes two parameters:
<ul>
  <li><strong>c</strong> - new svgC context with g element as its root node</li>
  <li><strong>g</strong> - newly created g element</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_g">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_g", 200, 200);
c.brushes({
  "g":  {"stroke-width":"5px"},
  "#shape1": {stroke:"#3771c8", fill:"none"},
  "#shape2": {stroke:"#ee0000", fill:"none"}
});

c.g("#shape1", function (c, g) {
  c.path("M  60, 60 l 20,20 m 0,-20 l -20,20");
  c.path("M  90, 90 l 20,20 m 0,-20 l -20,20");
  c.path("M 120,120 l 20,20 m 0,-20 l -20,20");
});
c.g("#shape2", function (c, g) {
  c.circle(130 , 70, 10);
  c.circle( 70, 100, 10);
  c.circle( 70, 130, 10);
});
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_g", 200, 200);
c.brushes({
  "g":  {"stroke-width":"5px"},
  "#shape1": {stroke:"#3771c8", fill:"none"},
  "#shape2": {stroke:"#ee0000", fill:"none"}
});

c.g("#shape1", function (c, g) {
  c.path("M  60, 60 l 20,20 m 0,-20 l -20,20");
  c.path("M  90, 90 l 20,20 m 0,-20 l -20,20");
  c.path("M 120,120 l 20,20 m 0,-20 l -20,20");
});
c.g("#shape2", function (c, g) {
  c.circle(130 , 70, 10);
  c.circle( 70, 100, 10);
  c.circle( 70, 130, 10);
});
  </pre>
</td>
</tr>
</table>


<h3>defs (fun)</h3>
Creates a defs element
<ul>
  <li><strong>fun</strong> - defs content constructor function</li>
</ul>


<h3>use (brush, x, y, link, attrs_ext)</h3>
Creates a use element
<ul>
  <li><strong>brush</strong> - brush name [optional]</li>
  <li><strong>x</strong> - the x-coordinate of the upper-left corner of the element</li>
  <li><strong>y</strong> - the y-coordinate of the upper-left corner of the element</li>
  <li><strong>link</strong> - the IRI reference to an element/fragment within an SVG document</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_defs">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_defs", 200, 200);
c.attrs["@path1"] = {stroke:"black", fill:"none", "stroke-width":"5px"};
c.attrs["@path2"] = {stroke:"red",   fill:"none", "stroke-width":"6px", "stroke-linejoin":"round"};

c.translate(100, 100).g("#sign", function (c, g) {
  c.defs(function (c, d) {
    c.g("#arrow", function (c, g) {
      c.path("@path1", "M0,0 L0,30");
      c.path("@path1", "M-8,21 L0,30 8,21");
    });
  });
  c.path("@path2", "M-45,40, 45,40, 0,-40 z");
  c.use(-10,   0, "#arrow");
  c.flipY();
  c.use( 10, -30, "#arrow");
});
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example1", 200, 200);
c.attrs["@path1"] = {stroke:"black", fill:"none", "stroke-width":"5px"};
c.attrs["@path2"] = {stroke:"red",   fill:"none", "stroke-width":"6px", "stroke-linejoin":"round"};

c.translate(100, 100).g("#sign", function (c, g) {
  c.defs(function (c, d) {
    c.g("#arrow", function (c, g) {
      c.path("@path1", "M0,0 L0,30");
      c.path("@path1", "M-8,21 L0,30 8,21");
    });
  });
  c.path("@path2", "M-45,40, 45,40, 0,-40 z");
  c.use(-10,   0, "#arrow");
  c.flipY();
  c.use( 10, -30, "#arrow");
});
  </pre>
</td>
</tr>
</table>


<h3>style (s_hash)</h3>
Creates a style element
<ul>
  <li><strong>hash</strong> - style hash object with CSS selector as keys and property-value hash as value</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_style">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_style", 200, 200);
c.defs(function (c, d) {
  c.style({
    ".red":   {stroke:"red",  fill:"none", "stroke-width":"9px"},
    ".blue":  {stroke:"white", fill:"#55a"},
  });
});

c.circle(".blue", 100, 100, 45);
c.circle(".red",  100, 100, 50);
c.line(".red", 65, 65, 135, 135);
c.line(".red", 65, 135, 135, 65);
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_style", 200, 200);
c.defs(function (c, d) {
  c.style({
    ".red":   {stroke:"red",  fill:"none", "stroke-width":"9px"},
    ".blue":  {stroke:"white", fill:"blue"},
  });
});

c.circle(".blue", 100, 100, 45);
c.circle(".red", 100, 100, 50);
c.line(".red", 65, 65, 135, 135);
c.line(".red", 65, 135, 135, 65);
  </pre>
</td>
</tr>
</table>



<h3>image (brush, x, y, w, h, link, attrs_ext)</h3>
Creates an image element
<ul>
  <li><strong>brush</strong> - brush name</li>
  <li><strong>x</strong> - the x-coordinate of the upper-left corner of the image</li>
  <li><strong>y</strong> - the y-coordinate of the upper-left corner of the image</li>
  <li><strong>w</strong> - the width of the image</li>
  <li><strong>h</strong> - the height of the image</li>
</ul>


<h2>1.4 Referenced elements</h2>

<h3>clipPath (brush, fun)</h3>
Creates a clipPath element
<ul>
  <li><strong>brush</strong> - brush name (used to assign id)</li>
  <li><strong>fun</strong> - clipPath content constructor function</li>
</ul>

<h3>linearGradient (brush, x1, y1, x2, y2, fun, attrs_ext)</h3>
Creates a clipPath element
<ul>
  <li><strong>brush</strong> - brush name (used to assign id)</li>
  <li><strong>x1</strong> - the x-coordinate of a gradient vector start point</li>
  <li><strong>y1</strong> - the y-coordinate of a gradient vector start point</li>
  <li><strong>x2</strong> - the x-coordinate of a gradient vector end point</li>
  <li><strong>y2</strong> - the y-coordinate of a gradient vector end point</li>
  <li><strong>fun</strong> - linearGradient content constructor function</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_lgradient">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_lgradient", 200, 200);
c.attrs["text"] = {fill:"white", "font-size":"40px"};
c.attrs["rect"] = {fill:"url(#sky1)", rx:5, ry:5};
c.defs(function(c, d) {
  c.linearGradient("#sky1", "0%", "0%", "100%", "0%", function(c, g) {
    c.gradientStop( "20%", "#ee0000");
    c.gradientStop( "50%", "#552222");
  });
});
c.rect(20,  20, 160, 160);
c.translate(115, 175).rotate(270);
c.text(0, 0, "Gradient");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_lgradient", 200, 200);
c.attrs["text"] = {fill:"white", "font-size":"40px"};
c.attrs["rect"] = {fill:"url(#sky1)", rx:5, ry:5};
c.defs(function(c, d) {
  c.linearGradient("#sky1", "0%", "0%", "100%", "0%", function(c, g) {
    c.gradientStop( "20%", "#ee0000");
    c.gradientStop( "50%", "#552222");
  });
});
c.rect(20,  20, 160, 160);
c.translate(115, 175).rotate(270);
c.text(0, 0, "Gradient");
  </pre>
</td>
</tr>
</table>


<h3>radialGradient (brush, cx, cy, r, fun, attrs_ext)</h3>
Creates a radialGradient element
<ul>
  <li><strong>brush</strong> - brush name (used to assign id)</li>
  <li><strong>cx</strong> - the x-axis coordinate of the center of the gradient circle</li>
  <li><strong>cy</strong> - the y-axis coordinate of the center of the gradient circle</li>
  <li><strong>r</strong> - radius of the gradient circle</li>
  <li><strong>fun</strong> - radialGradient content constructor function</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_rgradient">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_rgradient", 200, 200);
c.defs(function(c, d) {
  c.radialGradient("#hall2", "50%", "50%", "90%", function(c, g) {
    c.gradientStop(  "0", "#ee0");
    c.gradientStop("10%", "#f00");
    c.gradientStop("40%", "#522");
    c.gradientStop("50%", "#fff");
  });
});
c.rect(0,0, 200, 200, {fill:"url(#hall2)"});
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_rgradient", 200, 200);
c.defs(function(c, d) {
  c.radialGradient("#hall2", "50%", "50%", "90%", function(c, g) {
    c.gradientStop(  "0", "#ee0");
    c.gradientStop("10%", "#f00");
    c.gradientStop("40%", "#522");
    c.gradientStop("50%", "#fff");
  });
});
c.rect(0,0, 200, 200, {fill:"url(#hall2)"});
   </pre>
</td>
</tr>
</table>

<h3>gradientStop (offset, color, attrs_ext)</h3>
Creates a radientStop element
<ul>
  <li><strong>offset</strong> - indicates where the gradient stop is placed</li>
  <li><strong>color</strong> -  the color of a given gradient stop</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>

<h3>gradient (brush, s, attrs_ext)</h3>
Helper function for creating gradients
<ul>
  <li><strong>brush</strong> - brush name (used to assign id)</li>
  <li><strong>s</strong> - string describing gradient</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>

The gradient string format:
<pre>
[type][parameters]:[stops]+
</pre>

Gradietn types and parameters:
<pre>
l[alfa]:[stops]+
r[r]:[stops]+
r[r],[cx]:[stops]+
r[r],[cx],[cy]:[stops]+
</pre>

Gradient stop format:
<pre>
[offset]-[stop-color](/[stop-opacity])?
</pre>
Example:
<table>
<tr>
<td>
  <div id="example_grad1">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_grad1", 200, 200);
c.attrs["text"] = {fill:"white", "font-size":"40px"};
c.attrs["rect"] = {fill:"url(#sky2)", rx:5, ry:5};
c.defs(function(c, d) {
  c.gradient("#sky2", "l0:20%-#ee0000,50%-#552222");
});
c.rect(20,  20, 160, 160);
c.translate(115, 175).rotate(270);
c.text(0, 0, "Gradient");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_grad1", 200, 200);
c.attrs["text"] = {fill:"white", "font-size":"40px"};
c.attrs["rect"] = {fill:"url(#sky2)", rx:5, ry:5};
c.defs(function(c, d) {
  c.gradient("#sky2", "l0:20%-#ee0000,50%-#552222");
});
c.rect(20,  20, 160, 160);
c.translate(115, 175).rotate(270);
c.text(0, 0, "Gradient");
  </pre>
</td>
</tr>

<tr>
<td>
  <div id="example_grad2">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_grad2", 200, 200);
c.defs(function(c, d) {
  c.gradient("#hall1", "r90%:0-#ee0,10%-#f00,40%-#522,50%-#fff");
});
c.rect(0,0, 200, 200, {fill:"url(#hall1)"});
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_grad2", 200, 200);
c.defs(function(c, d) {
  c.gradient("#hall1", "r90%:0-#ee0,10%-#f00,40%-#522,50%-#fff");
});
c.rect(0,0, 200, 200, {fill:"url(#hall1)"});
  </pre>
</td>
</tr>
</table>

<h3>marker (brush, x, y, w, h, fun, attrs_ext)</h3>
Creates a radientmarker element
<ul>
  <li><strong>brush</strong> - brush name (used to assign id)</li>
  <li><strong>x</strong> - the x-axis coordinate of the reference point which is to be aligned exactly at the marker position</li>
  <li><strong>y</strong> - the y-axis coordinate of the reference point which is to be aligned exactly at the marker position</li>
  <li><strong>w</strong> - the width of the viewport into which the marker is to be fitted when it is rendered</li>
  <li><strong>h</strong> - the height of the viewport into which the marker is to be fitted when it is rendered</li>
  <li><strong>fun</strong> - marker content constructor function</li>
  <li><strong>attrs_ext</strong> - additional attributes [optional]</li>
</ul>
Example:
<table>
<tr>
<td>
  <div id="example_marker">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_marker", 200, 200);
c.defs(function (c, d) {
  c.attrs["marker"] = {fill:"white", orient:"auto"};
  c.marker("#arrows", 1.2, 1.2, 3, 3, function (c, m) {
    c.path(["M", 0,0, "l", 2,1.2, -2, 1.2, "Z"]);
  });
});

c.attrs["@blue"]  = {stroke:"none",  fill:"blue"};
c.attrs["@white"] = {stroke:"white", fill:"none"};
c.attrs["@arrow"] = {"stroke-width":"9px", 'marker-end':'url(#arrows)'}

c.circle("@blue", 100, 100, 50);
c.circle("@white", 100, 100, 48);
c.path("@white,@arrow", "M105,135 L105,75");
c.path("@white,@arrow", "M105,130 S110,100 75,100");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_marker", 200, 200);
c.defs(function (c, d) {
  c.attrs["marker"] = {fill:"white", orient:"auto"};
  c.marker("#arrows", 1.2, 1.2, 3, 3, function (c, m) {
    c.path(["M", 0,0, "l", 2,1.2, -2, 1.2, "Z"]);
  });
});

c.attrs["@blue"]  = {stroke:"none",  fill:"blue"};
c.attrs["@white"] = {stroke:"white", fill:"none"};
c.attrs["@arrow"] = {"stroke-width":"9px", 'marker-end':'url(#arrows)'}

c.circle("@blue",  100, 100, 50);
c.circle("@white", 100, 100, 48);
c.path("@white,@arrow", "M105,135 L105,75");
c.path("@white,@arrow", "M105,130 S110,100 75,100");
  </pre>
</td>
</tr>
</table>
</div>
</body>
</html>